import React, { Component } from "react";
// import React, { PureComponent } from "react";
// todo 只有类组件有生命周期
import Child from "./Child";

class App extends Component {
  // todo 挂载阶段
  // constructor就是react的第一个生命周期，constructor是组件被实例化的时候就调用，只调用一次
  // 初始化state，改变事件的this，得到ref变量等等以及处理props
  constructor(props) {
    super(props);
    console.log("constructor");
    this.state = {
      count: 10,
      list: [1, 2, 3, 4, 5, 6, 7],
    };
    // this.fn = this.fn.bind(this)
    // this.ipt = createRef();
  }

  // componentWillMount表示挂载前
  // componentWillMount已经被废弃了
  // componentWillMount不能做数据请求, 因为fiber(16版本)算法的存在，有可能导致请求做多次，影响性能
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
    // this.setState({
    //   count: 20,
    // });
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //   });
  }

  // render也是生命周期
  // 它必须要返回jsx, 页面显示的内容
  // 可以做解构以及对数据的处理, 不要在render做数据请求
  render() {
    console.log("render");
    const { count } = this.state;
    const { a } = this.props;
    const oddArr = this.state.list.filter((item) => item % 2);

    return (
      <>
        <h2>
          旧版生命周期 - {a} - {count}
        </h2>
        <ul>
          {oddArr.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
        <Child count={this.state.count} />
      </>
    );
  }

  // componentDidMount表示挂载结束
  // 可以做任意的事情，包括数据请求
  componentDidMount() {
    console.log("componentDidMount");
    setTimeout(() => {
      this.setState({
        count: 20,
      });
    }, 2000);
  }

  // todo 更新阶段
  // shouldComponentUpdate询问是否需要更新
  // 必须要返回true或者false
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log("shouldComponentUpdate");
  // console.log(nextState.count);
  // console.log(this.state.count);
  // return false;
  // if (nextState.count === this.state.count) {
  //   return false;
  // } else {
  //   return true;
  // }
  //   return nextState.count !== this.state.count;
  // }

  // componentWillUpdate表示更新前
  // 被废弃了
  UNSAFE_componentWillUpdate() {
    // 跟vue不同的是，这里是数据是改变之前的数据
    // console.log(this.state.count);
    console.log("componentWillUpdate");
  }

  // componentDidUpdate表示更新后
  // 不要在这里修改数据,会造成死循环
  componentDidUpdate() {
    // this.setState({
    //   count: 30
    // })
    console.log("componentDidUpdate");
  }

  // todo 卸载阶段
  // todo 卸载定时器，卸载websocket，移出事件监听，销毁echarts的实例等第三方插件
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
}

export default App;
